<template>
	<view>
		<view class="list">
			<view class="myswiper">
				<view @click="isindex=index" :class="isindex==index?'isactive item':'item'" v-for="(item,index) in list"
					:key="index">
					<text style="font-size: 14px;">{{item.desc}}</text>
					<view class="price">
						<text>￥</text>
						<text style="font-size: 18px;font-weight: bold;">{{item.price}}</text>
						<text v-if="index>0" class="isdel">{{index==1?392:1190}}</text>
					</view>
					<text :class="isindex==index?'issell sell':'sell'">{{item.info}}</text>
				</view>

			</view>
			<view class="membertitle">
				<view :class="isindex==index?'ttitle isttitle':'ttitle'" v-for="(item,index) in list" :key="index">
					{{item.title}}</view>
			</view>
			<view class="mybotton uibghui">开通VIP会员</view>
			<view style="text-align: right;font-size: 12px;color: darkgray;padding: 6px 0;">《VIP会员服务协议》</view>
		</view>
		<view class="vipauth uibghui">
			<view class="viptitle">
				<text class="vtitle">VIP会员权益</text>
				<text class="vmore">更多权益</text>
			</view>
			<view class="tablehead">
				<view class="headone1">等级</view>
				<view class="headone">非会员</view>
				<view class="headone">黄金会员</view>
				<view class="headone">钻石会员</view>


			</view>
			<view class="tablelist" v-for="(item,index) in viplist" :key="index"
				:style="index%2!==0?'background-color:#f8f8f8':''">
				<view class="headone1">{{item.title}}</view>
				<view class="headone">{{item.user0==1?'&#xe6bc;':'&#xee37;'}}</view>
				<view class="headone">{{item.user1==1?'&#xe6bc;':'&#xee37;'}}</view>
				<view class="headone">{{item.user2==1?'&#xe6bc;':'&#xee37;'}}</view>
			</view>
		</view>
		<view class="tip">
			说明：
			会员属于虚拟产品，购买后不支持退订。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isindex: 1,
				list: [{
						title: '体验会员',
						desc: '3个月',
						info: '折合32元/月',
						price: 98
					},
					{
						title: '黄金会员',
						desc: '1年',
						info: '折合21元/月',
						price: 258
					},
					{
						title: '钻石会员',
						desc: '3年',
						info: '折合14.9元/月',
						price: 538
					}
				],
				viplist: [{
						title: '绿色无广告',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '神煞智能设置',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '地支藏干智能设置',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '刑冲破害合知智能设置',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '人元司令分野',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '合盘',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '流日',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '流时',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '五行能量专业版',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '系统评估旺衰',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '系统评估格局',
						user0: 0,
						user1: 1,
						user2: 1
					},
					{
						title: '筛选功能专业版',
						user0: 0,
						user1: 1,
						user2: 1
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.tip {
		font-size: 12px;
		padding: 15px;
		color: #adadad;
	}

	//.headone
	.tablehead {
		background-color: antiquewhite;
		display: flex;
		font-size: 14px;
		//justify-content: space-between;
	}

	.tablelist {
		background-color: white;
		display: flex;
		font-size: 12px;
	}

	.headone {
		text-align: center;
		flex: 1;
		//font-size: 14px;
		color: #c07d0c;
		padding: 7px 0;
		font-family: myfont;
	}

	.headone1 {
		width: 150px;
		text-align: center;
		//flex: 1;
		//font-size: 14px;
		color: #c07d0c;
		padding: 7px 0;
	}

	.vtitle {
		font-size: 16px;
		color: antiquewhite;
		font-weight: bold;
	}

	.vmore {
		font-size: 14px;
		color: antiquewhite;
	}

	.viptitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		//background-color: #26253d;
		padding: 5px 15px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.vipauth {
		//border: #c07d0c solid 1px;
		margin: 10px;
		border-radius: 10px;
	}

	.mybotton {
		//background-color: #26253d;
		color: #dfb773;
		font-size: 16px;
		font-weight: bold;
		border-radius: 6px;
		padding: 10px;
		text-align: center;
		margin-top: 10px;
	}

	page {
		background-color: #f8f8f8;
	}

	.membertitle {
		padding: 5px;
		display: flex;
		justify-content: space-between;
	}

	.ttitle {
		font-size: 14px;
		text-align: center;
		flex: 0.3;
	}

	.isttitle {
		color: #c07d0c;
	}

	.list {
		background-color: white;
		border-radius: 10px;
		height: 210px;
		padding: 10px;
		margin: 10px;
	}

	.myswiper {
		background-color: white;
		height: 100px;
		display: flex;
		justify-content: space-between;
	}

	.item {
		flex: 0.3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
		border-radius: 6px;
		padding: 0 6px;
		color: #c07d0c;
		transition-property: border, color, background-color, box-shadow;
		transition-duration: .25s, 1s;
	}

	.price {
		font-size: 14px;
	}

	.isdel {
		color: #a2a2a2;
		font-size: 12px;
		text-decoration: line-through;
	}

	.sell {
		border: #e1dada solid 1px;
		font-size: 10px;
		padding: 2px 4px;
		border-radius: 20px;
		margin-top: 4px;
	}

	.isactive {
		color: #c07d0c;
		border: #c07d0c solid 1px;
		background-color: antiquewhite;
		box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.15);
	}

	.issell {
		background-color: #c07d0c;
		color: white;
		border: none;
	}
</style>